//新建Channel组件

import { Select } from 'antd'
import { getChannelsAPI } from 'api/channel'
import React, { useEffect, useState } from 'react'
const { Option } = Select;

/*
 自定义受控组件--改为受控组件 (受antd控制)
 把value和onChange托管给Form组件,Form源码内部会自动接管你的value和onChange
 1. 形参上定义value和onChange
 2. 将value和onChange传给组件Select即可
 3. 可以通过透传方式  透传props  然后在组件Select用结构的方式传送

*/
export default function Channel(props) {
    //声明state保存数据
  const [channelsList, setChannelsList] = useState([])
//   封装获取频道接口函数
  const loadChannels=async()=>{
    const res = await getChannelsAPI()
   setChannelsList(res.data.channels)
   // setChannelsList(()=> channelsList=res.data.channels)
 }
 //生命周期挂载后调用接口获取频道列表
  useEffect(()=>{
    loadChannels()
  },[])
  return (
    <div>
        <Select {...props}>
            {
              channelsList.map(item=>(
                <Option key={item.id} value={item.id}>{item.name}</Option>
              ))
            }
        </Select>
    </div>
  )
}
